<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>21-豆瓣案例</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration:none;
			}
			li{
				list-style:none;
			}
			body{
				line-height:1;
			}
			.container{
				height:638px;
				background:#f7f7f7;
			}
			.container .content{
				width:950px;
				height: 576px;
				margin: 0 auto;
				padding-top:40px;
				box-sizing: border-box;
			}
			nav{
				margin-bottom:12px;
			}
			nav span:nth-child(1){
				margin-right:25px;
			}
			nav span:nth-child(2){
				margin-right:8px;
			}
			nav span:nth-child(1) a{
				color:#494949;
				font-size:23px;
			}
			nav span:nth-child(2) a{
				font-size:13px;
				color:#007722;
				
			}
			nav span:nth-child(3) a{
				color:#3377aa;
				font-size:11px;
			}
			.container .content .pics{
				padding-left: 120px;
				/* 高度没必要设置了，因为清除浮动以后，高度随着子盒子的内容撑大 */
				/* height: 530px; */
				overflow: hidden;
			}
			.pics .item{
				width: 100px;
				height:235px;
				float:left;
				margin-right:60px;
				margin-bottom:70px;
			}
			.item img{
				width:99px;
				height:140px;
			}
			.item span:nth-of-type(1){
				color: #333333;
				font-size:12px;
				display:inline-block;
				text-align:center;
				margin-top:13px;
			}
			.item span:nth-of-type(2){
				color: #999999;
				font-size:12px;
				display:inline-block;
				text-align:center;
				width:99px;
				margin-top:13px;
			}
			.pics .item:nth-child(n+6){
				margin-bottom:0;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- 中心区域 -->
			<div class="content">
				<nav>
					<span><a href="">豆瓣时间</a></span>
					<span><a>热门专栏  · · · · · ·</a></span>
					<span><a href="">( 更多 ) </a></span>
				</nav>
				 
				<div class="pics">
					<!-- one -->
					<div class="item">
						<img src="images/3.jpg" alt="">
						<span>中国群星闪耀时——先秦诸子40讲</span>
						<span>音频专栏</span>
					</div>
					<!-- one_end -->
					<!-- one -->
					<div class="item">
						<img src="images/3.jpg" alt="">
						<span>中国群星闪耀时——先秦诸子40讲</span>
						<span>音频专栏</span>
					</div>
					<!-- one_end -->
					<!-- one -->
					<div class="item">
						<img src="images/3.jpg" alt="">
						<span>中国群星闪耀时——先秦诸子40讲</span>
						<span>音频专栏</span>
					</div>
					<!-- one_end -->
					<!-- one -->
					<div class="item">
						<img src="images/3.jpg" alt="">
						<span>中国群星闪耀时——先秦诸子40讲</span>
						<span>音频专栏</span>
					</div>
					<!-- one_end -->
					<!-- one -->
					<div class="item">
						<img src="images/3.jpg" alt="">
						<span>中国群星闪耀时——先秦诸子40讲</span>
						<span>音频专栏</span>
					</div>
					<!-- one_end -->
					<!-- one -->
					<div class="item">
						<img src="images/3.jpg" alt="">
						<span>中国群星闪耀时——先秦诸子40讲</span>
						<span>音频专栏</span>
					</div>
					<!-- one_end -->
					<!-- one -->
					<div class="item">
						<img src="images/3.jpg" alt="">
						<span>中国群星闪耀时——先秦诸子40讲</span>
						<span>音频专栏</span>
					</div>
					<!-- one_end -->
					<!-- one -->
					<div class="item">
						<img src="images/3.jpg" alt="">
						<span>中国群星闪耀时——先秦诸子40讲</span>
						<span>音频专栏</span>
					</div>
					<!-- one_end -->
					<!-- one -->
					<div class="item">
						<img src="images/3.jpg" alt="">
						<span>中国群星闪耀时——先秦诸子40讲</span>
						<span>音频专栏</span>
					</div>
					<!-- one_end -->
					<!-- one -->
					<div class="item">
						<img src="images/3.jpg" alt="">
						<span>中国群星闪耀时——先秦诸子40讲</span>
						<span>音频专栏</span>
					</div>
					<!-- one_end -->
				</div>
			</div>
			<!-- 中心区域end -->
		</div>
	</body>
</html>
